<template>
  <div class="demo-title">navbar/demo1</div>
  <div class="demo">
    <Navbar title="Title">
      <template #right>
        <div class="right-text">More</div>
      </template>
    </Navbar>
    <Navbar title="Title" />
    <Navbar title="Message" titleColor="#fff" background="#1677ff">
      <template #left>
        <Icon name="rect-left" color="#fff" />
      </template>
      <template #right>
        <Icon name="more-s" color="#fff" @click="clickRight"/>
      </template>
    </Navbar>
  </div>
</template>

<script lang="ts" setup>
  import Navbar from '@sscd-mobile/navbar'
  import Icon from '@sscd-mobile/icon'
  const clickRight = () => console.log('clickRight')
</script>

<style scoped>
  .demo {
    display: flex;
    flex-direction: column;
    .right-text {
      color: #165dff;
    }
  }
</style>
